<template>
  <div class="xuzhu">
    <ul class="order-info" v-if="orderInfo.money">
      <li class="li-header">续租</li>
      <li>当前租金<i class="fr">￥{{ orderInfo.money }}元</i></li>
      <li>当前押金<i class="fr">￥{{ orderInfo.dMoney }}元</i></li>
      <li>合约到期<i class="fr">{{ orderInfo.endTime | formatDate }}</i></li>
      <li>
        <group>
          <datetime
            v-model="endTime"
            placeholder="年/月/日"
            :start-date="Date.parse(new Date(orderInfo.endTime)) + 60 * 60 * 24 * 30 * 3 * 1000 | formatDate"
            title="续租至">
          </datetime>
          </group>
      </li>
    </ul>
    <div class="btn">
    	<span class="send" @click.stop="xuzuFun">确认续租</span>
    </div>
  </div>
</template>
<script>
  import { Datetime } from 'vux'
  export default {
    name: 'xu-zhu',
    components: {
      Datetime
    },
    data () {
      return {
        endTime: '',
        orderInfo: '',
        orderId: '',
        // startDate: ,
        format (val) {
          let strArr = val.split('-')
          return `${strArr[0]}年/${strArr[1]}月/${strArr[2]}日`
        }
      }
    },
    created () {
      this.orderId = this.$route.query.orderId
      this.getOrderDetail(this.orderId)
    },
    methods: {
      xuzuFun (orderId) {
        let data = {orderId: this.orderId, endTime: this.endTime}
        if (this.endTime === '') {
          this.$vux.toast.text('没有选择续租时间')
          return
        }
        this.$axiosPosting(this.$api.reletOrder, data).then(res => {
          if (res.code === '0000') {
            this.$vux.toast.text('续约成功')
            this.$router.push('/myOrderForRenter')
          } else {
            this.$vux.toast.text(res.msg)
          }
        })
      },
      getOrderDetail (orderId) {
        this.$axiosPosting(this.$api.queryOrderDetail4Renter, {orderId: this.orderId}).then(res => {
          this.orderInfo = res.data.order
        })
      }
    }
  }
</script>
<style lang="less">
  .xuzhu {
    .weui-cells {
      line-height: 48px;
      margin: 0;
      &::before, &::before {
        border: 0;
        border-bottom: 0;
      }
    }
    .btn {
    	position: absolute;
    	bottom: 0;
    	left: 0;
		span {
	      background-color:#ff9600;
	      display: inline-block;
	      height: 45px;
	      line-height: 45px;
	      width:100vw;
	      position: relative;
	      bottom: 0;
	      left: 0;
	      color: white;
	      text-align: center;
	      margin-top: 50px;
	    }
    } 
    ul {
      border-bottom: 6px solid #F3F3F3;
      li {
      	padding: 0 18px;
      	box-sizing: border-box;
        height: 48px;
        line-height: 48px;
        border-bottom: 1px solid #F3F3F3;
        width: 100%;
        font-size: 15px;
        text-align: left;
        .weui-cells{
          margin-top: 0;
          padding:0;
          height: 48px;
          line-height: 48px;
          font-size: 15px;
        }
        .weui-cell{
            padding:0;
        }
        i {
          font-style: normal;
        }
        .fl {
          float: left;
          height: 20px;
          line-height: 20px;
          margin-top: 14px;
          text-align: center;
        }
        .fr {
          float: right;
          color: #777777;
        }
      }
    .li-header {
    	padding: 0;
    	height: 60px;
    	line-height: 54px;
    	border: 0;
    	&::before {
    		content: '';
    		display: inline-block;
			width: 3px;
			position: relative;
			top: 1px;
			height: 14px;
			background-color: #ff9600;
			margin-right: 11px;
    	}

    }
    }
  }
</style>
